<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        body {
            background: #13142b;
            /*background: #F3F4F7;*/
            text-align: center
        }
        .login-form {
            width: 480px;
            margin: 250px auto 0;
            padding: 40px 30px;
            box-shadow: 0 0 16px rgba(31, 84, 167, 0.1);
            border: 2px solid #ecf0f5;
            background: #fff;
            text-align: center;
            border-radius: 5px;
            overflow: hidden;
        }

        .login-form h1 {
            font-size: 30px;
            font-weight: 500;
            margin-bottom: 30px;
            color: #444;
        }

        .login-form input {
            width: 100%;
            height: 55px;
            border: #99a2ab 1px solid;
            font-size: 18px;
            border-radius: 5px;
            line-height: 55px;
            text-indent: 2rem;
        }

        .login-form .login-form-submit {
            text-indent: 0;
            background: #0071cf;
            color: #fff;
        }
        canvas {
            opacity: .6;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .clearfix{
            clear: both;
        }
        .login-form .captcha{
            margin-bottom: 15px;
            clear: both;
        }
        .login-form .captcha input{
            width: 50%;
            float: right;
        }
        .login-form .captcha img{
            width: 47%;
            float: left;
        }
    </style>
</head>
<body id="">

<div class="login-form">
    <form method="post">
        {:token_field()}
        {if $message}
        <div style="background: #fef0f0; color: #f56c6c; padding: 8px 16px;">{$message}</div>
        {/if}
        <input type="hidden" name="parent_url" id="parent_url" value="">
        <p><input type="text" name="username" placeholder="请输入账户"/></p>
        <p><input type="password" name="password" placeholder="请输入密码"/></p>
        {if $hasCaptcha}
        <p class="captcha">
            {:captcha_img()}
            <input type="text" name="captcha" placeholder="请输入验证码"/>
            <div class="clearfix"></div>
        </p>
        {/if}
        <p><input class="login-form-submit" type="submit" value="登 录"/></p>
    </form>
</div>
<canvas style="z-index: -1" id="rainbow" width="1920" height="434"></canvas>
</body>
<script>
    // VARS
    const DPR = window.devicePixelRatio;
    const colors = [
        ['#EC008C', '#f957b6'],
        ['#EF4136', '#ff7972'],
        ['yellow', '#fff'],
        ['lime', '#7aff7a'],
        ['#27AAE1', '#5ec8f2'],
        ["#662D91", '#a158d8']];

    const tau = Math.PI * 2;
    const start = Math.PI; // Start position
    const finish = .5; // Finish (in % of circle "tau" basically ending at Math.PI * 2)
    const inc = .007;
    const rainbowHeight = .5; // of view height
    const arcStagger = .05; // in %
    const sparklesInPerStripe = 3;

    let sparkles = [];

    // UTILS
    const clamp = (min, max, val) => {
        return Math.min(Math.max(min, val), max);
    };
    const boolRandom = () => {
        return Math.round(Math.random()) ? false : true;
    };

    // CANVAS
    const sizeCanvas = () => {
        radius = clamp(15, 50, window.innerWidth / 60 / DPR);
        const canvas = document.getElementById('rainbow');
        canvas.width = window.innerWidth * DPR;
        canvas.height = window.innerHeight * DPR;
    };

    // SPARKLE PROPS
    const addRandom = function (lineWidth) {
        return (boolRandom() ? -1 : 1) * Math.random() * lineWidth;
    };
    const makeSparkle = ({ cx, cy, radiusX, radiusY, endAngle, lineWidth, color }) => {
        return {
            x: cx + radiusX * Math.cos(endAngle) + addRandom(lineWidth), // stay out in front
            y: cy + radiusY * Math.sin(endAngle) + addRandom(lineWidth),
            opacity: 1,
            color,
            rad: Math.max(radius * Math.random() * DPR, 15) };

    };

    // ANIMATE
    function animate(percent = 0) {
        const doneAnimatingIn = percent >= finish + arcStagger * colors.length; // animating in rainbow arcs

        let width = window.innerWidth * DPR;
        let height = window.innerHeight * DPR;

        const lineWidth = height * .5 / colors.length;

        const cx = width / 2;
        const startCy = height + lineWidth * rainbowHeight + (height - colors.length * lineWidth) / 3; // Possibly simplify this... but the math is good :)

        const startRadiusX = width / 2 + colors.length * lineWidth * 2;
        const startRadiusY = height;

        let ctx = document.getElementById('rainbow').getContext('2d');
        ctx.clearRect(0, 0, width, height);
        ctx.globalAlpha = 1;
        ctx.lineWidth = lineWidth;

        for (let i = colors.length - 1; i > -1; i--) {
            const [colorLine, colorSparkle] = colors[i];

            const cy = startCy + i * (lineWidth / 2 - 1); // - 1 for overlap

            // Making these "concentric" ellipses
            const radiusX = startRadiusX - i * lineWidth / 2;
            const radiusY = startRadiusY - i * lineWidth / 2;

            const endAngle = tau * (percent - i * arcStagger) + start;

            const angle = clamp(start, tau * finish + start, endAngle);

            // DRAW ONE OF OUR ELLIPSE LINES
            // - One color of our rainbow
            ctx.beginPath();
            ctx.shadowColor = colorLine;
            ctx.strokeStyle = colorLine;
            ctx.ellipse(
                cx,
                cy,
                radiusX,
                radiusY,
                0,
                start,
                angle,
                false);

            ctx.lineCap = "round";
            ctx.stroke();
            ctx.closePath();


            if (!doneAnimatingIn) {
                // ADD: Animating in sparkles, follow the start of each color
                for (let j = 0; j < sparklesInPerStripe; j++) {
                    sparkles.push(
                        makeSparkle({ cx, cy, radiusX, radiusY, endAngle: angle, lineWidth, color: colorLine }));

                }
            } else {
                // ADD: Normal sparkles after animating in
                sparkles.push(makeSparkle({ cx, cy, radiusX, radiusY, endAngle: Math.random() * Math.PI + Math.PI, lineWidth, color: boolRandom() ? '#fff' : colorSparkle }));
            }
        }

        // PAINT THE SPARKLES
        // and get next sparkles ready too
        const nextSparkles = [];
        for (let i = 0, len = sparkles.length; i < len; i++) {
            const { x, y, opacity, color, rad } = sparkles[i];
            ctx.beginPath();
            ctx.globalAlpha = opacity;
            ctx.fillStyle = color;
            ctx.arc(x - rad, y - rad, rad, 0, Math.PI / 2);
            ctx.arc(x - rad, y + rad, rad, 3 * Math.PI / 2, 2 * Math.PI);
            ctx.arc(x + rad, y + rad, rad, Math.PI, 3 * Math.PI / 2);
            ctx.arc(x + rad, y - rad, rad, Math.PI / 2, Math.PI);
            ctx.fill();

            // Sparkles we are keeping
            if (opacity > .2 && rad > .2) {
                nextSparkles.push({
                    x,
                    y,
                    opacity: opacity - .03,
                    rad: rad - .2,
                    color });

            }
        }
        sparkles = nextSparkles;

        if (!doneAnimatingIn) {
            // Animating in our rainbow
            requestAnimationFrame(function () {
                animate(percent + inc);
            });
        } else {
            // Resume sparkles on static rainbow
            requestAnimationFrame(function () {
                animate(finish + colors.length * arcStagger);
            });
        }
    }

    sizeCanvas();
    requestAnimationFrame(function () {animate();});
    window.addEventListener('resize', sizeCanvas);
</script>

<script>
    if((window.self !== window.top) && document.referrer){
        document.getElementById('parent_url').value = document.referrer
    }
</script>
</html>